import { DemoDataItem } from '@/models/demo';
import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import React from 'react';

type FormProps = {
  visible: boolean;
  data: Partial<DemoDataItem> | undefined;
  onSubmit: (data: DemoDataItem) => void;
  onCancel: () => void;
};

const CreateForm: React.FC<FormProps> = (props) => {
  const { visible, data, onSubmit } = props;

  return (
    <ModalForm<DemoDataItem>
      visible={visible}
      title={data?.id ? '新增' : '编辑'}
      onFinish={async (values) => {
        onSubmit(values);
      }}
      modalProps={{
        destroyOnClose: true,
      }}
    >
      <input type="hidden" name="id" value={data?.id} />
      <ProFormText
        name="name"
        label="名称"
        rules={[
          {
            required: true,
            message: '请输入',
          },
        ]}
        placeholder="名称"
      ></ProFormText>
      <ProFormTextArea name="description" label="描述" placeholder="描述" />
    </ModalForm>
  );
};

export default CreateForm;
